<template>
  <n-card title="我的课程" style="margin-bottom: 16px">
    <n-tabs type="line" animated>
      <n-tab-pane name="myCource" tab="全部">
        <!-- 即加载用户激活的课程 -->
        <div class="list flex flex-wrap">
          <div
            class="item w-[260px] h-[210px] mr-3 border-gray-200 border-1 flex flex-col items-center justify-center"
            v-for="v in data"
            :key="v.id"
            @click="handleToDetail(v.id)"
          >
            <n-image
              class="w-[230px] h-[160px]"
              :src="buildPicUrl(v.pic || 'xxx')"
              :fallback-src="failPng"
            ></n-image>
            <div>{{ v.name }}</div>
          </div>
        </div>
      </n-tab-pane>
    </n-tabs>
  </n-card>
</template>

<script setup lang="ts">
import { buildPicUrl } from '@/utils/commonBusiness'
import failPng from '@/assets/images/R-C.png'
import useUserStore from '@/stores/modules/user'

import { getUserActiveExamByPage } from '@/api/userActiveExam'
import type {
  UserActiveExamReq,
  UserActiveExamRowData
} from '@/types/userActiveExam'
const data = ref<any[]>([])
const router = useRouter()
const handleToDetail = (id: string) => {
  router.push({
    name: 'examDetail',
    query: {
      examId: id
    }
  })
}

// 获取用户激活科目列表
const loadUserActiveExams = async () => {
  if (!useUserStore().userInfo?.id) {
    await useUserStore().getUserInfo()
  }
  let param: UserActiveExamReq = {
    page: 1,
    pageSize: 9999,
    userId: useUserStore().userInfo?.id
  }

  getUserActiveExamByPage(param)
    .then((res) => {
      console.log(res)
      data.value = res.data.items.map((item) => item.Exam)
    })
    .catch(console.error)
    .finally(() => {})
}

onMounted(() => {
  loadUserActiveExams()
})
</script>

<style scoped lang="scss"></style>
